Autolayout で正多角形の頂点上に UI コンポーネントを配置する

幾何学模様を作りましょう

Autolayout で幾何学的な配置を表現するときは、View にcenter制約を与えて、そのconstantを調整すると簡単です。

例

正三角形

正五角形

これらは共に上記の制約で作られています。

※「●」は UILabel です。

やり方

 

 

 

 

 

 

基本はこの手順です。

1. View にcenter制約を与える
2. constantを調整する

※constantの座標系（？）は、左上が (+, +)、 右下が (-, -) のようです。

練習

それでは実際に UILabel を正三角形の頂点上に配置してみましょう。 手順は以下のとおりです。

1. 正三角形の外接円の半径を決める
2. それぞれのコンポーネントについて、中心からの偏角を求める
3. 極座標を使ってコンポーネントの座標を求める
4. 座標分だけcenter制約のconstantをずらす

1. 正三角形の外接円の半径を決める

これは好きな値を決めるだけです。 サンプルでは半径r = 100としました。

2. それぞれのコンポーネントについて、中心からの偏角を求める

ここは気合で求めてください。 x = 0, y = 0の補助線を引けば簡単に求めることができます。

3. 極座標を使ってコンポーネントの座標を求める

極座標では次の関係が成り立ちます。

• x = r cosθ
• y = r sinθ

それぞれの頂点座標に当てはめると、値は以下のようになります。

頂点 A = (100 * cos90°, 100 * sin90°) = (0, 100)

頂点 B = (100 * cos(-30°), 100 * sin(-30°)) = (87, -50)

頂点 C = (100 * cos(-150°), 100 * sin(-150°)) = (-87, -50)

※小数点以下は四捨五入しています。

4. 座標分だけ center 制約の constant をずらす

上記の「例」で行ったようにconstantを設定していきます。 座標の正負が極座標と iOS の View では異なっていることに注意してください。 X 軸方向の値を逆転させる必要があります。

• 頂点 A
  • Center X constant = 0
  • Center Y constant = 100
• 頂点 B
  • Center X constant = -87
  • Center Y constant = -50
• 頂点 C
  • Center X constant = 87
  • Center Y constant = -50

できあがり

まとめ

「center制約のconstant」というのは直感的ではありませんが、調整することは可能です。 Autolayout で View を構成するときは少しだけ意識してみましょう。

おまけ